<template>
  <el-menu
      default-active="/home"
      class="el-menu-demo"
      mode="horizontal"
      active-text-color="#90EE90"
      router
  >
    <el-image style="width: 10%;height: 57.6px;margin-right: 5px" src="../../public/logo.webp" alt="Logo"></el-image>
    <el-menu-item class="animation" index="/home">首页</el-menu-item>
    <el-menu-item class="animation" index="/heritage/list">非遗</el-menu-item>
    <el-menu-item class="animation" index="/goodsinfo">合作</el-menu-item>
    <el-menu-item class="animation" index="/projectinfo">分享</el-menu-item>
    <el-menu-item class="animation" index="/graph">图谱</el-menu-item>
    <div style="margin-top: 15px;margin-left: 5px;width: 45%">
      <el-input
          v-model="searchInputValue"
          placeholder="请输入"
          class="input-with-select"
          @keydown.enter="toHeritageList"
      >
        <template #prepend>
          <el-select v-model="selectValue" placeholder="请选择" style="width: 75px">
            <el-option label="非遗" value="heritage"/>
          </el-select>
        </template>
        <template #append>
          <el-button @click="toHeritageList" :icon="Search"/>
        </template>
      </el-input>
    </div>
    <div class="user-info">
      <el-dropdown style="margin-top: 2px;float: right">
        <span class="el-dropdown-link">
          小向
          <el-icon class="el-icon--right"><arrow-down/></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :icon="User" index="user" @click="toUser">个人信息</el-dropdown-item>
            <el-dropdown-item :icon="ChatLineSquare" @click="toUserProjectinfo">发布内容</el-dropdown-item>
            <el-dropdown-item :icon="Goods" @click="toUseOrders">订单管理</el-dropdown-item>
            <el-dropdown-item :icon="SwitchButton">安全退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <span style="margin-right: 10px;float: right">
        <el-icon><Location/></el-icon>
        <!--        新疆维吾尔族自治区-乌鲁木齐市-->
        {{ userStore.user.province }}-{{ userStore.user.city }}
      </span>
    </div>

  </el-menu>
</template>

<script setup>
import {ref, getCurrentInstance, onMounted} from 'vue'
import {Search, User, Collection, ChatLineSquare, Goods, SwitchButton} from '@element-plus/icons-vue'
import {useRouter, useRoute} from 'vue-router'
import baiduMap from "../util/server.js";
import {useUserStore} from "../store/useUserStore.js";
import {useHeritageStore} from "../store/useHeritageStore.js";
import bus from "../util/bus.js";

const {proxy} = getCurrentInstance()
const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const heritageStore = useHeritageStore()
const searchInputValue = ref('')
const selectValue = ref('heritage')


//路由到非遗列表页
const toHeritageList = () => {
  if (searchInputValue.value === '') {
    proxy.$message({
      type: 'warning',
      message: '搜索的值不能为空',
      grouping: true,
      showClose: true,
      duration: 1500,
      offset: 70
    })
    return
  }
  heritageStore.searchInputValue = searchInputValue.value
  if (route.name === 'HeritageList') {
    bus.emit('getHeritageList', heritageStore.searchInputValue)
  } else {
    router.push({
      name: 'HeritageList',
      params: {
        heritageName: heritageStore.searchInputValue
      }
    })
  }

}

//请求当前位置
const getLocation = () => {
  proxy.request.get(`/location?ak=${baiduMap.akIp}&coor=bd09ll`).then(res => {
    if (res.status === 0) {
      userStore.user.province = res.content.address_detail.province
      userStore.user.city = res.content.address_detail.city
      userStore.user.point = res.content.point
    }
  })
}
const toUser = () => {
  router.push({
    name: 'User'
  })
}
const toUserProjectinfo = () => {
  router.push({
    path: '/users/projectinfo'
  })
}
const toUseOrders = () => {
  router.push({
    path: '/myorders'
  })
}

onMounted(() => {
  getLocation()
})
</script>

<style lang="less" scoped>
.selected {

  color: #90EE90;
}


.el-menu {
  .el-select {
    --el-select-input-focus-border-color: #90EE90;
  }

  .user-info {
    width: 550px;
    margin-left: 5%;
    margin-top: 20px;
  }

  .animation:hover, .is-active {
    background-color: #F0FFF0;
    color: #90EE90;
  }

  width: 85%;
  margin: 0px auto;
}

.el-input, is-focus {
  --el-input-focus-border-color: #90EE90;
}
</style>